<!-- 官网主页 -->
<template>
    <div class='pd bgff pt10 pm50'>
        <p class="fz18">
            轮播图 <n-button type="primary" size="medium" @click="addBanner">添加轮播图</n-button>

        </p>
        <div class="banner-message-box mt20">

            <div class="display-flex" v-for="(item, idx) in form.banner" :key="idx">
                <div class="banner-box vertical-center sz" @click="itemBannerFun(item)">
                    <img :src="item.img" class="imgjz w100 h100" v-if="item.img" />
                    <i class="iconfont dx-24gl-pictures fz32 z9" v-else></i>
                </div>
                <div class="flex-1 ml10">
                    <n-input v-model:value="item.title1" type="text" placeholder="标题一" size="medium"
                        clearable></n-input>
                    <n-input v-model:value="item.title2" type="text" placeholder="标题二" size="medium" clearable
                        class="mt10"></n-input>
                    <n-input v-model:value="item.msg" type="text" placeholder="介绍" size="medium" clearable
                        class="mt10"></n-input>
                    <n-input v-model:value="item.url" type="text" placeholder="跳转地址" size="medium" clearable
                        class="mt10"></n-input>

                </div>
                <div class="delect-banner vertical-center sz" @click="delBanner(idx)">
                    点击删除
                </div>
            </div>
        </div>

        <p class="fz18 mt20">
            产品中心 <n-button type="primary" size="medium" @click="addproduct">添加产品</n-button>
        </p>

        <div class="banner-message-box mt20">

            <div v-for="(item, idx) in form.product" :key="idx">
                <p>
                    <n-input v-model:value="item.icon" type="text" placeholder="iconurl" size="medium" clearable
                        @change=""></n-input>

                </p>
                <p class="mt10">
                    <n-input v-model:value="item.wtitle" type="text" placeholder="TAB标题" size="medium" clearable
                        @change=""></n-input>

                </p>
                <div class="mt10 display-flex">
                    <div class="banner-box vertical-center sz" @click="itemBannerFuner(item)">

                        <img :src="item.cover" class="imgjz w100 h100" style="height:150px" v-if="item.cover" />
                        <i class="iconfont dx-24gl-pictures fz32 z9" v-else></i>
                    </div>
                    <div class="flex-1 ml10">
                        <p class="fz24">
                            <n-input v-model:value="item.title" type="text" placeholder="产品标题" size="medium" clearable
                                @change=""></n-input>

                        </p>
                        <p class="mt10">
                            <n-input v-model:value="item.msg" type="textarea" placeholder="产品介绍" size="medium" clearable
                                @change=""></n-input>
                        </p>
                        <p class="mt10">
                            <n-button type="primary" size="medium" @click="selechCp(item)">点击选择产品</n-button>

                        </p>
                    </div>
                    <div class="delect-banner vertical-center sz" @click="delproduct(idx)">
                        点击删除
                    </div>
                </div>
            </div>
        </div>

        <p class="fz18 mt20">
            服务客户
            <n-button type="primary" size="medium" @click="ServiceshowModal = true">添加服务客户</n-button>
        </p>
        <div class="banner-message-box mt20 ab">

            <div v-for="(item, idx) in form.serveClients" :key="idx">
                <div class="mt10 pr">

                    <div class="banner-box vertical-center sz pr">
                        <i class="iconfont dx-close close-iconsert" @click="closeItems(idx)"></i>
                        <img :src="item.cover" class="imgjz w100 h100" style="height:150px" v-if="item.cover" />
                        <i class="iconfont dx-24gl-pictures fz32 z9" v-else></i>
                    </div>
                    <p class="fz16 b pt10">{{ item.title }}</p>

                </div>
            </div>
        </div>




        <div class="mt100 About-the-Company display-flex pr" v-if="form.AboutUs">
            <div class="About-the-Company-bg sz" @click="setBg(1)">
                <img :src="form.AboutUs.img1" class="w100 h100 imgjz sz" />
            </div>
            <div class="flex-1 About-the-Company-bg sz" @click="setBg(2)">
                <img :src="form.AboutUs.img2" class="w100 h100 imgjz sz" />
            </div>

            <div class="company-introduction pr">
                <div class="title-text fz32 flex-1 tl">
                    <n-input v-model:value="form.AboutUs.title" type="text" placeholder="" size="medium" clearable></n-input>
                    
                </div>
                <p class="company-text tl">
                    <n-input v-model:value="form.AboutUs.introduce" :autosize="{minRows:10}" type="textarea" placeholder="" size="medium" clearable></n-input>
                </p>

                <a class="digihealth digihealth-xiangqing_moren red fz40 pr vertical-center">
                    <i class="digihealth digihealth-a-gengduowuwenzi_moren cf right-icon"></i>
                </a>
            </div>
        </div>


        <div class="wd index-certificate">
            <p>
                <n-button type="primary" size="medium" @click="addZSfun"  class="addzshert">点击添加认证或证书</n-button>
                
            </p>
        <div class="display-flex cen index-certificate-context">

            <div class="flex-1 index-certificate-case" v-for="(item,idx) in form.certification" :key="idx">
                <img :src="item.img" class="sz" @click="setzsfun(item)">
                <div class="display-flex">
                   <p class="flex-1 ">
                    <n-input v-model:value="item.tittle" type="text" size="medium" clearable placeholder="请输入认证或证书的标题"></n-input>
                   
                   </p>
                    <span class="fz12 ls mr10 mt5 sz" @click="delezsd(idx)">点击删除</span>
                </div>
            </div>
      
        
        </div>
    </div>



        <p class="fz18 mt100 ">
            新闻动态
            <n-button type="primary" size="medium" @click="newsAndTrendsM = true">添加新闻动态</n-button>
        </p>
        <div class="banner-message-box mt20 ab">

            <div v-for="(item, idx) in form.newsAndTrends" :key="idx">
                <div class="mt10 pr">

                    <div class="banner-box vertical-center sz pr">
                        <i class="iconfont dx-close close-iconsert" @click="closeItemser(idx)"></i>
                        <img :src="item.cover" class="imgjz w100 h100" style="height:150px" v-if="item.cover" />
                        <i class="iconfont dx-24gl-pictures fz32 z9" v-else></i>
                    </div>
                    <p class="fz16 b pt10">{{ item.title }}</p>

                </div>
            </div>
        </div>

        <div class="aboutUs-bottom vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="aboutSave">保存</n-button>
                <n-button type="primary" size="medium" @click="callBack" class="ml20">返回上一页</n-button>
            </div>
            
        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>轮播图</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="迪聚轮播图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>首页产品封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="迪聚首页产品封面"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="productpup" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>产品中心<span class="fz12 z9">(点击选中产品)</span></div>
            </template>
            <div class="productpup-context cen">
                <div v-for="(item, idx) in product" :key="idx" class="sz" @click="getcp(item)">
                    <img :src="item.cover" class="productpup-img imgjz">
                    <p class="fz14">{{ item.title }}</p>
                </div>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="productpup = false"> 取消 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="ServiceshowModal" preset="card" style="width: 1200px">
            <template #header>
                <div>
                    服务客户
                </div>
            </template>
            <div>
                <PartnerHospital pup="1" ref="lisPupfun" @callBack="PartnerHospitalcallBack"></PartnerHospital>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="ServiceshowModal = false"> 取消 </n-button>
                </div>
            </template>
        </n-modal>


 

        <n-modal v-model:show="newsAndTrendsM" preset="card" style="width: 1200px">
            <template #header>
                <div>
                    新闻动态
                </div>
            </template>
            <div>
                <newsTrends pup="1" ref="lisPupfun" @callBack="newsTrendscallback"></newsTrends>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="newsAndTrendsM = false"> 取消 </n-button>
                </div>
            </template>
        </n-modal>




        <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>关于我们背景图</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" types="关于我们背景图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsan = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalsi" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>资质logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsi" types="资质logo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalsi = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsi"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue";
import { callBack, dxpost, qurl, dxget } from "../../util/index"
import photoGallery from "../../components/util/photoGallery";
import PartnerHospital from "./PartnerHospital/index.vue"

import newsTrends from "./newsTrends/index.vue"
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const photoShowModalsan = ref(false)
const ServiceshowModal = ref(false)
const productpup = ref(false)
const indexItme = ref()
const indexItmeer = ref()
const product = ref()
const newsAndTrendsM = ref(false)
const photoShowModalsi = ref()
const dqfrom = ref()
const zsdqitem = ref()
const form = ref({
    banner: [
        {
            img: "",
            title1: "",
            title2: "",
            msg: "",
            url: ""
        },
        {
            img: "",
            title1: "",
            title2: "",
            msg: "",
            url: ""
        }
    ],
    product: [
        {
            icon:"",
            wtitle: "",
            cover: "",
            title: "",
            msg: ""
        }
    ],
    serveClients: [], // 服务客户
    AboutUs: {// 关于我们
        img1: "",
        img2: "",
        title: "",
        introduce: ""
    },
    certification:[
        {
            img:'',
            tittle:""
        }
    ],
    newsAndTrends: [] // 新闻动态
})

const itemBannerFun = (item) => {
    photoShowModal.value = true;
    indexItme.value = item
}
const itemBannerFuner = (item) => {
    photoShowModaler.value = true;
    indexItmeer.value = item
}
const addBanner = () => {
    form.value.banner.push({
        img: "",
        title1: "",
        title2: "",
        msg: "",
        url: ""
    })
}
const addproduct = () => {
    form.value.product.push({
        icon:"",
        wtitle: "",
        cover: "",
        title: "",
        msg: ""
    })
}

const delBanner = (idx) => {
    form.value.banner.splice(idx, 1)
}

const delproduct = (idx) => {
    form.value.product.splice(idx, 1)
}

const selechCp = async (item) => {
    indexItmeer.value = item
    productpup.value = true
    const { data }: any = await dxget("djhs/djproductManagement")
    product.value = data
}

const getcp = (data) => {
    indexItmeer.value.id = data.id
    indexItmeer.value.title = data.title
    indexItmeer.value.cover = data.cover
    indexItmeer.value.msg = data.msg
    productpup.value = false
}


let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    indexItme.value.img = jjnmnxe;
    photoShowModal.value = false;
};


let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    indexItmeer.value.cover = jjnmnxeer;
    photoShowModaler.value = false;
};
const setBg = (data) => {
    photoShowModalsan.value = true;
    dqfrom.value = data

}
let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    if (dqfrom.value == 1) {
        form.value.AboutUs.img1 = jjnmnxesan
    } else if (dqfrom.value == 2) {
        form.value.AboutUs.img2 = jjnmnxesan
    }
    photoShowModalsan.value = false;
};

const setzsfun = (data)=>{
    photoShowModalsi.value = true;
    zsdqitem.value = data
}

let jjnmnxesi = "";
const getImgsi = (data) => {
    jjnmnxesi = data;
};
const setImgsi = () => {
    zsdqitem.value.img = jjnmnxesi
    photoShowModalsi.value = false;
};

const PartnerHospitalcallBack = async (ids) => {
    const { data }: any = await dxget("djhs/PartnerHospital?id=" + ids)
    data.map(a => {
        form.value.serveClients.push(a)
    })
    ServiceshowModal.value = false
}
const newsTrendscallback = async (ids) => {
    const { data }: any = await dxget("djhs/news?id=" + ids)
    data.map(a => {
        form.value.newsAndTrends.push(a)
    })
    newsAndTrendsM.value = false
}



const closeItems = (idx) => {
    form.value.serveClients.splice(idx, 1)
}
const closeItemser = (idx) => {
    form.value.newsAndTrends.splice(idx, 1)
}


const addZSfun = ()=>{
    form.value.certification.push(  {
            img:'',
            tittle:""
        })
}
const delezsd = (idx)=>{
    form.value.certification.splice(idx,1)
}

const aboutSave = async()=>{
   const {errno}:any =  await dxpost("djhs/djsinglePage",{
        id:6,
        detail:JSON.stringify(form.value)
    },"put")
    if(errno==0){
        window.$message.success("操作成功！")
    }
}
const getdetail = async ()=>{
  const {data}:any=  await dxget("djhs/djsinglePage",{id:6})
  form.value= JSON.parse(data.detail)
}
getdetail()
</script>
<style scoped>
.banner-box {
    border: 1px dashed #e0e0e0;
    width: 300px;
    border-radius: 4px;
}

.productpup-img {
    width: 100%;
    border: 1px dashed #e0e0e0;
    height: 70px;
}

.banner-message-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 20px
}

.banner-message-box.ab {
    grid-template-columns: repeat(4, 1fr);
}

.delect-banner {
    background: #f8f8f8;
    color: #333;
    width: 30px;
    padding-left: 5px;
    padding-right: 5px;
}

.productpup-context {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px
}

.close-iconsert {
    position: absolute;
    right: 0;
    top: -10px;
    z-index: 99;
    font-size: 26px;
    color: red;
    cursor: pointer;
}
.addzshert{
    position: relative;
    top: -0px;
    left: -50px;
    z-index: 999;
}
</style>